<div>
    <Carousel @ref="_carousel">
        <CarouselSlick>
            <h3>1</h3>
        </CarouselSlick>
        <CarouselSlick>
            <h3>2</h3>
        </CarouselSlick>
        <CarouselSlick>
            <h3>3</h3>
        </CarouselSlick>
        <CarouselSlick>
            <h3>4</h3>
        </CarouselSlick>
    </Carousel>
</div>
<div class="button-container">
    <Button OnClick="@( _=>_carousel.Previous())" Size="ButtonSize.Small">Prev</Button>
    <div>
        @foreach (int i in Enumerable.Range(0, 4))
        {
            <Button OnClick="@( _=>_carousel.GoTo(i))" Size="ButtonSize.Small">@(i+1)</Button>
        }
    </div>
    <Button OnClick="@( _=>_carousel.Next())" Size="ButtonSize.Small">Next</Button>

</div>

<style>
    .button-container {
        display: flex;
        justify-content: space-between;
        padding-top:4px;
    }

    .ant-carousel .slick-slide {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;
    }

    .ant-carousel .slick-slide h3 {
        color: #fff;
    }
</style>

@code{
    Carousel _carousel;
}